import React, { FC, useCallback, useMemo, useEffect } from "react";
import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
import "./index.scss";
import { PostItem } from "@src/model";
import Taro from "@tarojs/taro";
import defaultAvatar from "@assets/images/defaultAvatar.jpg";
import thumbsUp from "@assets/icons/thumbsUp.png";
import comment from "@assets/icons/comment.png";
import { dateFormat, getFileType, strDateFormat } from "@src/utils";
import { useAppDispatch, useAppSelector } from "@src/store";
import { setValue } from "@src/store/currentPost";
import CustomVideo from "../custom-video";
import { setBgSrc } from "@src/store/globalData";
import { followUser, likeIssue } from "@src/service";
import Bridge from "@src/bridge";
import { NativeModules } from "react-native";

type Props = {
    data: PostItem
    allShow: boolean
}

const CPostItem: FC<Props> = (props) => {
    const { data, allShow } = props;
    console.log(data);
    const userInfo = useAppSelector(state => state.userInfo.data);
    const dispath = useAppDispatch();


    const isVideo = useMemo(() => {
        if (!data.all_medias || !data.all_medias.length) {
            return false;
        }
        const isVideo = getFileType(data.all_medias[0].file_url) == "video";
        return isVideo;
    }, [data.all_medias]);

    const handleClickPost = useCallback(() => {
        dispath(setValue(data));
        if (isVideo) {
            // 记录视频播放进度
            Taro.navigateTo({
                url: "/pages/postVideoDetail/index"
            });
        } else {
            Taro.navigateTo({
                url: `/pages/postDetail/index?postId=${data.id}`
            });
        }

    }, [data, isVideo, dispath]);


    const handleClickUser = useCallback(() => {
        Taro.navigateTo({
            url: "/pages/userCenter/index"
        });
    }, []);

    const handleClickThump = useCallback(() => {
        // 点赞
        likeIssue(data.id).then(res => {
            console.log(res);
        });
    }, [data.id]);

    const handleClickShare = useCallback(()=>{
        Bridge.Instance.shareBoard({ text:"11" });
    },[]);

    const handleFollowUser = useCallback(() => {
        followUser(data.publisher_id).then(res => {
            console.log(res);
        }).finally(() => {
        });
    }, [data.publisher_id]);

    const renderFollowBtn = (item) => {
        if (userInfo.id.toString() === item.publisher_id) {
            return null;
        }
        if (item.is_publisher_follow) {
            return <View className="post__item__intro__messageBtn">私聊</View>;
        } else {
            return <View className="post__item__intro__followBtn" onClick={handleFollowUser}>+ 关注</View>;
        }

    };


    useEffect(() => {
        if (data.all_medias?.length) {
            dispath(setBgSrc(data.all_medias[0].file_url));
        }
    }, [allShow, dispath, data.all_medias]);


    return (<View className="post__item">
        <View className="post__item__intro" onClick={handleClickUser}>
            {data.title ? <View className="post__item__intro__title">{data.title}</View> : null}
            <View className="post__item__intro__bar">
                <View className="post__item__intro__creator">
                    <Image className="post__item__intro__creator__avatar" src={data.avatorUrl || defaultAvatar} mode="aspectFill" />
                    <View className="post__item__intro__creator__right">
                        <Text className="post__item__intro__creator__id">
                            {data.publisher_name}
                        </Text>
                        <Text className="post__item__intro__creator__createTime">{strDateFormat(data.created_at, "MM-dd")}</Text>
                    </View>
                </View>
                {renderFollowBtn(data)}
            </View>
        </View>
        <View className="post__item__content" onClick={handleClickPost}>
            {
                data.title ? <View className="post__item__content__title">111</View> : null
            }
            {
                data.content ? <View className="post__item__content__text">{data.content}</View> : null
            }
            
            <View className="post__item__content__images">
                {
                    (data.all_medias || []).map((m, index) => {
                        if (getFileType(m.file_url) == "video") {
                            return <CustomVideo play={allShow} id={`myVideo_${data.id}`} src={m.file_url} style={{ height: "100%" }} />;
                        } else if (getFileType(m.file_url) == "image") {
                            return <Image mode="aspectFill" key={`${data.id}_${m.uuid}`} className="post__item__content__images__item" src={m.file_url} />;
                        }
                    })

                }
            </View>
          
        </View>
        <View className="post__item__btns">
            <View className="post__item__btns__group shareBtn" onClick={handleClickShare}>
                <Text  className="ionicons" >{"\uf13a"}</Text>
                <Text  >{data.share_count}</Text>
            </View>
            <View className="post__item__btns__group" onClick={handleClickThump}>
                {data.is_thumbs_up ? <Text  className="ionicons thumbsUpIcon" >{"\uf33c"}</Text> : <Text  className="ionicons" >{"\uf33b"}</Text>}
                <Text>{data.thumbs_up_count}</Text>
            </View>
            <View className="post__item__btns__group" onClick={handleClickPost}>
                <Text  className="ionicons" >{"\uf1ec"}</Text>
                <Text>{data.reply_count}</Text>
            </View>
        </View>
    </View>);
};

export default CPostItem;